<template>
  <div class="ma-5 pa-5">
    <v-container class="grey lighten-5">
      <v-row>
        <v-col md="4">
          <v-card
            class="pa-2"
            outlined
            tile
          >
            .col-md-4
          </v-card>
        </v-col>
        <v-col
          md="4"
          class="ml-auto"
        >
          <v-card
            class="pa-2"
            outlined
            tile
          >
            .col-md-4 .ml-auto
          </v-card>
        </v-col>
      </v-row>
      <v-row>
        <v-col
          md="3"
          class="ml-md-auto"
        >
          <v-card
            class="pa-2"
            outlined
            tile
          >
            .col-md-3 .ml-md-auto
          </v-card>
        </v-col>
        <v-col
          md="3"
          class="ml-md-auto"
        >
          <v-card
            class="pa-2"
            outlined
            tile
          >
            .col-md-3 .ml-md-auto
          </v-card>
        </v-col>
      </v-row>
      <v-row>
        <v-col
          cols="auto"
          class="mr-auto"
        >
          <v-card
            class="pa-2"
            outlined
            tile
          >
            .col-auto .mr-auto
          </v-card>
        </v-col>
        <v-col cols="auto">
          <v-card
            class="pa-2"
            outlined
            tile
          >
            .col-auto
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>
